<template>
        <template v-for="(item,index) in props.routerList">
          <el-menu-item 
          @click="handelClick(item,`${props.index}-${item.meta.id}`)"
          v-if="!item.children || item.children.length==0"
          :index="`${props.index}-${item.meta.id}`"
          :key="`${props.index}-${item.meta.id}`"
          style="width: 168px;"
          >
          <el-icon size="20">
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.name }}</span>
        </el-menu-item>
        <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
          <template #title>
            <el-icon size="20">
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.name }}</span>
          </template>
          <!-- 组件嵌套，此时传的参数为children中的数据，index为父组件的index值 -->
          <tree-menu
          :index="`${props.index}-${item.meta.id}`"
          :routerList="item.children"/>
        </el-sub-menu>
        </template>
       
</template>

<script setup>
import { useRouter } from 'vue-router';
import {useMenuStore} from '../stores/menuStore'
//pinia状态管理
const menuStore = useMenuStore() 
const props = defineProps(["routerList",'index'])
//创建router实例
const router = useRouter()
//点击菜单
const handelClick =(item,active)=>{
  menuStore.addMenu(item.meta)
  menuStore.updateMenuActive(active)  
  router.push(item.meta.path)
}
</script>

<style>

</style>